<div id="c<%= comment.cid %>" class="comment" style="margin-top: 20px; margin-bottom: 20px; padding-bottom: 9px; word-wrap: break-word;">

  <div style="margin-bottom: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom: 0;overflow-y: visible;" class="navbar navbar-light bg-light">
    <% if comment.status == 4 %>
      <p class="alert alert-warning moderated">
        <% if logged_in_as(['admin','moderator']) %>
          <%= translation('dashboard._comment_moderate.first_time_post') %>
          <a class="btn btn-outline-secondary btn-sm" href="/admin/publish_comment/<%= comment.id %>"><%= translation('dashboard.moderate.approve') %></a>
          <a class="btn btn-outline-sedondary btn-sm" href="/admin/mark_comment_spam/<%= comment.id %>"><%= translation('dashboard.moderate.spam') %></a>
        <% else %>
          <%= raw translation('dashboard.moderate.pending_approval', :url => '/wiki/moderation') %>
        <% end %>
      </p>
    <% end %>

    <div class="navbar-text float-left d-md-none">&nbsp;&nbsp;</div>

    <div class="navbar-text float-left">
      <% if comment.author %>
        <% if comment.author && comment.author.photo_file_name %>
          <img alt="Comment Author Profile Picture" style="width:32px;margin-right:6px;" class="rounded-circle" src="<%= comment.author.photo_path(:thumb) %>" />
        <% else %>
          <div style="vertical-align:middle;display:inline-block;height:32px;width:32px;margin-right:6px;background:#ccc;" class="rounded-circle"></div>
        <% end %>
        <% if comment.author.name != "" %>
          <a href="/profile/<%= comment.author.name %>"><%= comment.author.name %></a>
        <% else %>
          <%= comment.name %>
        <% end %>
      <% end %>
      <span class="d-none d-md-inline"><%= translation('notes._comment.commented') %></span>
      <a style="color:#aaa;" href="#c<%= comment.cid %>"><%= distance_of_time_in_words(comment.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></a>
      <% if comment.author %>
        <% streak = comment.author.streak %>
        <% if streak[0] > 7 %>
          <a href="/wiki/streaks"><i class="fa fa-fire" style="padding-left:4px; font-size:16px; color:#f63;" data-toggle="tooltip" data-placement="top" title="<%= raw translation('notes._comment.streak_title', :author => comment.author.name, :streak_notes => streak[1][0], :streak_wiki => streak[1][1], :streak_comments => streak[1][2], :streak_days => streak[0]) %>"></i></a>
        <% end %>
      <% end %>
    </div>

    <div class="navbar-text float-right" style="padding-right:10px;margin-right: 0;">
      <% if comment.author && comment.author && comment.author.role %>
      <!-- Role icon for admins & moderators
        <% if comment.author.role == 'admin' %>
          <a href="/users/role/admin"><i class="fa fa-cog" style="font-size:20px; margin-top:8px;" data-toggle="tooltip" data-placement="top" title="Admin"></i></a>
        <% elsif comment.author && comment.author.role == 'moderator' %>
          <a href="/wiki/moderators"><i class="fa fa-star" style="font-size:20px; margin-top:8px;" data-toggle="tooltip" data-placement="top" title="Moderator"></i></a>
        <% end %>
      -->
      <% end %>

      <% if comment.comment_via == 1 %>
        <i data-toggle="tooltip" title="This comment was posted by email." class="fa fa-envelope"></i>
      <% end %>
      <% if current_user && comment.uid == current_user.uid %>
        <a 
          aria-label="Edit Comment" 
          class="btn btn-outline-secondary btn-sm edit-comment-btn" 
          data-toggle="tooltip" 
          title="Edit Comment"
          href="javascript:void(0)" onClick="
            $('#comment-form-wrapper-edit-<%= comment.cid %>').toggle();
            $('#<%= comment.cid %>-like-emojis').toggle();                               
            $('#comment-form-edit-<%= comment.cid %>').toggle();
            $('#c<%= comment.cid %>show').toggle();
          "
        >
          <i class="fa fa-pencil"></i>
        </a>
      <% end %>
      <% if current_user &. can_moderate? %>
        <a aria-label="Mark Spam" data-toggle="tooltip" title="Mark Spam: Remove Comment and Ban User" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" data-confirm="Are you sure? The user will no longer be able to log in or publish, and their content will be hidden except comments." href="/admin/mark_comment_spam/<%= comment.id %>">
          <i class="fa fa-ban"></i>
        </a>
      <% else %>
        <a aria-label="Flag as spam" data-toggle="tooltip" title="Flag as spam to moderators" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" href="/moderate/flag_comment/<%= comment.id %>" data-toggle="tooltip" data-placement="top" title="Flag this Comment">
          <i class="fa fa-flag"></i>
        </a>
      <% end %>
      <% if logged_in_as(['admin', 'moderator']) || (current_user && (comment.uid == current_user.uid || comment.parent.uid == current_user.uid)) %>
        <a aria-label="Delete Comment" data-toggle="tooltip" title="Delete Comment" class="btn btn-outline-secondary btn-sm delete-comment-btn" id="c<%= comment.cid %>delete-btn">
          <i class='icon fa fa-trash'></i>
        </a>
      <% end %>
      <% if current_user %>
        <a aria-label="Leave an Emoji Reaction" rel="tooltip" title="Leave an Emoji Reaction" class="btn btn-outline-secondary btn-sm dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class='far fa-heart'></i>
        </a>
        <div id="emoji-dropdown" style="background:#f8f8f8;padding:0;" class=" dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
          <p id="emoji-title" style="text-align: center;color: #586069; font-size:14px;margin:6px;">Pick Your Reaction</p>
          <div id= "dropdown-divider" style="display: block;height: 0;border-top: 1px solid #e1e4e8;">
          </div>         
          <div id="emoji-list" class="emoji-container">              
            <% emoji_names, emoji_image_map = emoji_info %>                           
            <% emoji_names.each do |e| %>
              <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
              <% str = "/comment/like?comment_id=#{comment.cid}&user_id=#{current_user.uid}&emoji_type=#{capitalized_emoji_name}" %>               
              <%= link_to str, data: { method: "post", remote: true }, style: "margin: 6px;", class: "emoji-btn" do %>                     
                <img alt="React to post" class="emoji grow" height="20" width="20" src="<%= emoji_image_map[e] %>">                         
              <% end %>
            <% end %>
          </div>
        </div>  
      <% end %>      
    </div>  
  </div>

  <script>

    $("#c<%= comment.cid %>delete-btn").click(function () {
      $.confirm({
        title: 'Confirm!',
        theme: 'Supervan',
        content: 'Are you sure?',
        buttons: {

          confirm: function () {
            $.ajax({
              url : "/comment/delete/<%= comment.cid %>",
              type: 'GET',
              success: function(response){
                notyNotification('sunset', 3000, 'error', 'topRight', 'Comment deleted');
                $("#c<%= comment.cid %>").remove();
                $('#comment-count')[0].innerHTML = response.comment_count;
              }
            });
          },

          cancel: function () {
              notyNotification('sunset', 3000, 'info', 'topRight', 'Comment deletion cancelled!');
          },
        }
      });
    });

    $('.emoji-btn').click(function() {
      setTimeout(() => {
        $('#emoji-dropdown').removeClass('show');
        $('#dropdownMenuButton').attr('aria-expanded', 'false');
      }, 5000);
    });
  </script>

  <div style="border: 1px solid #e7e7e7;padding: 36px;" id="c<%= comment.cid %>show">

    <% comment_body = comment.render_body %>
    <div class="comment-body" id="comment-body-<%= comment.cid %>">
      <%= raw auto_link(insert_extras(filtered_comment_body(comment_body)), :sanitize => false) %>
    </div>

    <% if contain_trimmed_body?(comment_body) %>
      <span style="background-color: #DCDCDC;  border-radius: 7px; cursor: pointer;" ><a class="email-toggle" data-toggle="collapse" data-target="#comment-<%= comment.cid %>-extra-content" style='text-decoration: none;'>&nbsp;&ensp;&#x2022&#x2022&#x2022&nbsp;&ensp;</a></span>
      <div class="collapse" id="comment-<%= comment.cid %>-extra-content" ><div class="blockquotestyle"><%= raw trimmed_body(comment_body) %></div></div>
    <% end %>

    <% if comment.body.include?('?') %>
      <p class="alert alert-info">Is this a question? <a href="/questions/new?title=<%= comment.body %>">Click here</a> to post it to the <a href="/questions">Questions page</a>.
      </p>
    <% end %>
    <% breakoutQuestions = Tag.find_nodes_by_type("from:#{comment.cid}") %>
    <% if breakoutQuestions&.length > 0 %>
      See <a href="/questions/tag/from:<%= comment.cid %>"><%= breakoutQuestions.length %> questions</a> broken out from this comment.
    <% end %>
    <% if comment.parent.has_power_tag('activity') && current_user && current_user.id == comment.uid %>
      <div class="alert alert-info">Have you attempted or completed this activity? Consider <a href="/post?n=15798&tags=replication:<%= comment.nid %>,<%= comment.parent.tagnames.join(',') %>">sharing how it went</a> to help refine and improve it.</div>
    <% end %>

    <% if comment.reply_to.nil? %>
      <% comment.replied_comments.order("timestamp ASC").each do |replied_comment| %>
        <% if logged_in_as(['admin','moderator'])%>
          <% if replied_comment.status == 4 || replied_comment.status == 1 %>
            <%= render :partial => "notes/comment", :locals => {:comment => replied_comment} %>
          <% end %>
        <% elsif current_user && current_user.id == replied_comment.author.id %>
          <% if replied_comment.status == 1 || (replied_comment.status == 4 && replied_comment.uid == current_user.id) %>
            <%= render :partial => "notes/comment", :locals => {:comment => replied_comment} %>
          <% end %>
        <% else %>
          <% if replied_comment.status == 1 %>
            <%= render :partial => "notes/comment", :locals => {:comment => replied_comment} %>
          <% end %>
        <% end %>
      <% end %>
      <p style="color: #006dcc; cursor: pointer; user-select: none;" id="comment-<%= comment.cid %>-reply-toggle">Reply to this comment...</p>
      <div id="comment-<%= comment.cid %>-reply" style="margin-top: 30px;display: none;">
        <div id="comment-<%= comment.cid %>-reply-section">
          <% if current_user %>
            <div class="inline" id="question-comment-form">
              <%= render :partial => "comments/form", :locals => { 
                title: "Reply to this comment", 
                reply_to: comment.cid, 
                comment: false, 
                placeholder: "Help the author refine their post, or point them at other helpful information on the site. Mention users by @username to notify them of this thread by email", 
                url1: '/conduct', 
                location: :reply # toolbar needs this to create dropzone ID
              } %>
            </div>
          <% else %>
            <p><%= link_to "Log in", "/login?return_to=#{request.path}" %> to comment</p>
          <% end %>
        </div>
      </div>
    <% end %>

  </div>
  <% str = "#{comment.id}-like-emojis" %>
  <% emoji_names, emoji_image_map = emoji_info %>
  <% user_reactions_map = comment.user_reactions_map %>
  <div id="<%= str %>" class="float-right comment-reactions-container" style="margin: 0; width: 100%; display: flex; border: 1px solid #e7e7e7; border-top: 0;">
    <% emoji_names.each do |e| %>
      <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
      <% str = "#{comment.id}-emoji-button-#{e}" %>
      <% user_reactions_exist = user_reactions_map.has_key? capitalized_emoji_name %>
      <% display = user_reactions_exist ? "display: flex;" : "display: none;" %>
      <% title = user_reactions_exist ? user_reactions_map[capitalized_emoji_name][:users_string] : "" %>
      <% likes_num = user_reactions_exist ? user_reactions_map[capitalized_emoji_name][:likes_num] : "" %>
      <button aria-label="Reaction" id="<%= str %>" style="border: 0; border-radius: 0px; background: #f1f8ff; border-right: 1px solid #e7e7e7; padding-top: 8px; padding-bottom: 8px; <%= display %>" type="button" class="btn btn-sm" data-toggle="tooltip" data-placement="bottom" title="<%= title %>">
        <img alt="<%= str %>" height="20" width="20" src="<%= emoji_image_map[e] %>">
        <div style="margin-left: 6px;font-size: 14px;"><%= likes_num %></div>
      </button>
    <% end %>
  </div>

  <% if current_user %>
    <% 
      h = { 
        title: I18n.t('notes._comment.edit_comment'), 
        comment: comment, 
        location: :edit,
        placeholder: I18n.t('notes._comment.edit_placeholder')
      } 
    %>
    <% h[:is_answer] = true if local_assigns[:is_answer] %>
    <%=  render :partial => "comments/form", :locals => h %>
  <% end %>
  <br />

</div>

<script>
  $("#comment-<%= comment.cid %>-reply-toggle").click(function () {
    $("#comment-<%= comment.cid %>-reply").toggle();
  });
</script>

<style>
  .emoji-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start;
    align-content:center; 
    box-sizing: border-box;
    padding:6px;
  }

  #emoji-dropdown .dropdown-menu {
    max-width: 196px;
  }

  .grow {
    transition: transform .15s cubic-bezier(.2,0,.13,2);
  }

  .grow:hover {
    transform: scale(1.2);
  }

  .grow:active {
    transform: scale(1);
  }
</style>
